<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目标追踪系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 替换为qrcode-generator库 -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        neutral: '#1F2937',
                        'neutral-light': '#F3F4F6',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                        'noto-sc': ['Noto Sans SC', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            .qr-container {
                position: relative;
                transition: all 0.3s ease;
            }
            .qr-container:hover {
                transform: scale(1.02);
            }
            .progress-bar {
                transition: width 1s ease-in-out;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(to right, #3B82F6, #8B5CF6);
            }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-neutral-light to-white min-h-screen">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300" id="mainNav">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-handshake-o text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-neutral">目标追踪系统</span>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <button id="refreshBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-all duration-300 flex items-center">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>刷新排序</span>
                    </button>
                    <div class="relative">
                        <button id="themeToggle" class="p-2 rounded-full hover:bg-neutral-light transition-colors">
                            <i class="fa fa-moon-o text-neutral"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 介绍区域 -->
        <section class="mb-12 text-center">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold font-noto-sc text-gradient mb-4">同心同行 一起向未来</h1>
            <p class="text-lg text-neutral/70 max-w-2xl mx-auto">扫描二维码输入目标金额，系统将实时更新并按金额排序显示，帮助你直观了解团队目标完成情况。</p>
        </section>

        <!-- 二维码和表单区域 -->
        <section class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
            <!-- 二维码卡片 -->
            <div class="bg-white rounded-2xl p-8 card-shadow transform transition-all duration-300 hover:-translate-y-1 qr-container">
                <h2 class="text-xl font-semibold text-neutral mb-6 flex items-center">
                    <i class="fa fa-qrcode text-primary mr-2"></i>
                    扫描二维码输入目标
                </h2>
                <div class="flex justify-center mb-4">
                    <div id="qrcode" class="w-64 h-64 p-4 border-2 border-dashed border-neutral-light rounded-xl flex items-center justify-center">
                        <div class="text-center text-neutral/50">
                            <i class="fa fa-spinner fa-spin text-3xl mb-2"></i>
                            <p>生成中...</p>
                        </div>
                    </div>
                </div>
                <p class="text-sm text-neutral/60 text-center">请使用微信扫描上方二维码输入目标金额（万元）</p>
            </div>

            <!-- 统计信息卡片 -->
            <div class="bg-white rounded-2xl p-8 card-shadow transform transition-all duration-300 hover:-translate-y-1">
                <h2 class="text-xl font-semibold text-neutral mb-6 flex items-center">
                    <i class="fa fa-bar-chart text-primary mr-2"></i>
                    目标统计
                </h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-neutral-light rounded-xl p-4">
                        <p class="text-sm text-neutral/60 mb-1">总参与人数</p>
                        <p class="text-2xl font-bold text-neutral" id="totalParticipants">0</p>
                    </div>
                    <div class="bg-neutral-light rounded-xl p-4">
                        <p class="text-sm text-neutral/60 mb-1">平均目标值</p>
                        <p class="text-2xl font-bold text-neutral" id="averageGoal">0 万元</p>
                    </div>
                    <div class="bg-neutral-light rounded-xl p-4">
                        <p class="text-sm text-neutral/60 mb-1">最高目标值</p>
                        <p class="text-2xl font-bold text-secondary" id="maxGoal">0 万元</p>
                    </div>
                    <div class="bg-neutral-light rounded-xl p-4">
                        <p class="text-sm text-neutral/60 mb-1">最低目标值</p>
                        <p class="text-2xl font-bold text-accent" id="minGoal">0 万元</p>
                    </div>
                </div>
                <div class="mt-6 pt-6 border-t border-neutral-light">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-sm text-neutral/60">目标完成进度</span>
                        <span class="text-sm font-medium text-neutral" id="progressText">0%</span>
                    </div>
                    <div class="h-2 bg-neutral-light rounded-full overflow-hidden">
                        <div id="progressBar" class="h-full bg-primary rounded-full progress-bar" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 图表区域 -->
        <section class="bg-white rounded-2xl p-8 card-shadow mb-12">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                <h2 class="text-xl font-semibold text-neutral mb-4 md:mb-0 flex items-center">
                    <i class="fa fa-bar-chart text-primary mr-2"></i>
                    目标金额柱状图（万元）
                </h2>
                <div class="flex space-x-2">
                    <button id="sortHighBtn" class="bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-lg transition-all duration-300 flex items-center">
                        <i class="fa fa-sort-amount-desc mr-2"></i>
                        <span>从高到低</span>
                    </button>
                    <button id="sortLowBtn" class="bg-neutral-light hover:bg-neutral/20 text-neutral px-4 py-2 rounded-lg transition-all duration-300 flex items-center">
                        <i class="fa fa-sort-amount-asc mr-2"></i>
                        <span>从低到高</span>
                    </button>
                </div>
            </div>
            <div class="h-[400px] w-full">
                <canvas id="goalChart"></canvas>
            </div>
        </section>

        <!-- 表格区域 -->
        <section class="bg-white rounded-2xl p-8 card-shadow mb-12">
            <h2 class="text-xl font-semibold text-neutral mb-6 flex items-center">
                <i class="fa fa-table text-primary mr-2"></i>
                目标详情表
            </h2>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-neutral-light">
                    <thead class="bg-neutral-light">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral/60 uppercase tracking-wider">排名</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral/60 uppercase tracking-wider">参与者</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral/60 uppercase tracking-wider">目标金额(万元)</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral/60 uppercase tracking-wider">提交时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral/60 uppercase tracking-wider">状态</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-neutral-light" id="goalTableBody">
                        <!-- 表格内容将通过JavaScript动态生成 -->
                        <tr class="text-center">
                            <td colspan="5" class="px-6 py-12 text-neutral/50">
                                <i class="fa fa-inbox text-4xl mb-4"></i>
                                <p>暂无数据</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="mt-4 flex justify-between items-center">
                <div class="text-sm text-neutral/60">
                    显示 <span id="displayCount">0</span> 条记录
                </div>
                <div class="flex space-x-1">
                    <button class="px-3 py-1 border border-neutral-light rounded hover:bg-neutral-light transition-colors">上一页</button>
                    <button class="px-3 py-1 bg-primary text-white rounded">1</button>
                    <button class="px-3 py-1 border border-neutral-light rounded hover:bg-neutral-light transition-colors">下一页</button>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center">
                        <i class="fa fa-handshake-o text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl">目标追踪系统</span>
                    </div>
                    <p class="text-sm text-white/70 mt-2">同心同行，一起向未来</p>
                </div>
                <div class="flex space-x-4">
                    <a href="#" class="text-white/70 hover:text-white transition-colors">
                        <i class="fa fa-weixin text-xl"></i>
                    </a>
                    <a href="#" class="text-white/70 hover:text-white transition-colors">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                    <a href="#" class="text-white/70 hover:text-white transition-colors">
                        <i class="fa fa-github text-xl"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-white/10 mt-6 pt-6 text-center text-sm text-white/50">
                <p>© 2025 目标追踪系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 移动端表单 (微信扫码后显示) -->
    <div id="mobileForm" class="fixed inset-0 bg-white z-50 flex items-center justify-center p-4 hidden">
        <div class="w-full max-w-md bg-white rounded-2xl p-8 shadow-2xl">
            <div class="text-center mb-6">
                <i class="fa fa-pencil-square-o text-primary text-4xl mb-2"></i>
                <h2 class="text-xl font-bold text-neutral">输入你的目标金额</h2>
                <p class="text-neutral/60 text-sm">请输入你的目标金额（单位：万元）</p>
            </div>
            <form id="goalForm" class="space-y-4">
                <div>
                    <label for="goalAmount" class="block text-sm font-medium text-neutral mb-1">目标金额</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-neutral/60">
                            <i class="fa fa-cny"></i>
                        </span>
                        <input type="number" id="goalAmount" name="goalAmount" step="0.01" min="0" class="block w-full pl-10 pr-3 py-3 border border-neutral-light rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300" placeholder="例如: 100.5" required>
                    </div>
                </div>
                <div>
                    <label for="participantName" class="block text-sm font-medium text-neutral mb-1">参与者姓名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-neutral/60">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="participantName" name="participantName" class="block w-full pl-10 pr-3 py-3 border border-neutral-light rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-300" placeholder="请输入您的姓名" required>
                    </div>
                </div>
                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 flex items-center justify-center">
                    <i class="fa fa-paper-plane mr-2"></i>
                    提交目标
                </button>
            </form>
            <div class="mt-6 text-center">
                <button id="closeFormBtn" class="text-neutral/60 hover:text-neutral transition-colors">
                    <i class="fa fa-times mr-1"></i> 关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 提交成功提示 -->
    <div id="successToast" class="fixed bottom-4 right-4 bg-secondary text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 flex items-center z-50">
        <i class="fa fa-check-circle mr-2 text-xl"></i>
        <span>提交成功！页面即将刷新...</span>
    </div>

    <script>
        // 模拟数据 - 实际应用中应该从服务器获取
        let goalData = [
            // { id: 1, name: '张三', amount: 120.5, time: '2025-06-20 08:30', status: 'active' },
            // { id: 2, name: '李四', amount: 98.2, time: '2025-06-21 10:15', status: 'active' },
            // { id: 3, name: '王五', amount: 150.75, time: '2025-06-22 14:45', status: 'active' },
            // { id: 4, name: '赵六', amount: 88.0, time: '2025-06-23 09:20', status: 'active' },
            // { id: 5, name: '钱七', amount: 110.3, time: '2025-06-24 11:10', status: 'active' }
        ];

        // 检查是否是移动端和微信浏览器
        function isMobileWeChat() {
            const userAgent = navigator.userAgent.toLowerCase();
            return userAgent.match(/MicroMessenger/i) && (userAgent.match(/iphone|ipod|ipad|android/i));
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            // 生成二维码
            generateQRCode();
            
            // 初始化图表
            initChart();
            
            // 更新表格数据
            updateTableData();
            
            // 更新统计信息
            updateStats();
            
            // 如果是微信移动端，显示表单
            if (isMobileWeChat()) {
                document.getElementById('mobileForm').classList.remove('hidden');
            }
            
            // 表单提交处理
            document.getElementById('goalForm').addEventListener('submit', function(e) {
                e.preventDefault();
                submitGoal();
            });
            
            // 关闭表单按钮
            document.getElementById('closeFormBtn').addEventListener('click', function() {
                document.getElementById('mobileForm').classList.add('hidden');
            });
            
            // 刷新按钮
            document.getElementById('refreshBtn').addEventListener('click', function() {
                refreshData();
            });
            
            // 排序按钮
            document.getElementById('sortHighBtn').addEventListener('click', function() {
                sortData('high');
                updateChart();
                updateTableData();
                this.classList.remove('bg-neutral-light', 'hover:bg-neutral/20', 'text-neutral');
                this.classList.add('bg-primary/10', 'hover:bg-primary/20', 'text-primary');
                
                document.getElementById('sortLowBtn').classList.remove('bg-primary/10', 'hover:bg-primary/20', 'text-primary');
                document.getElementById('sortLowBtn').classList.add('bg-neutral-light', 'hover:bg-neutral/20', 'text-neutral');
            });
            
            document.getElementById('sortLowBtn').addEventListener('click', function() {
                sortData('low');
                updateChart();
                updateTableData();
                this.classList.remove('bg-neutral-light', 'hover:bg-neutral/20', 'text-neutral');
                this.classList.add('bg-primary/10', 'hover:bg-primary/20', 'text-primary');
                
                document.getElementById('sortHighBtn').classList.remove('bg-primary/10', 'hover:bg-primary/20', 'text-primary');
                document.getElementById('sortHighBtn').classList.add('bg-neutral-light', 'hover:bg-neutral/20', 'text-neutral');
            });
            
            // 主题切换
            document.getElementById('themeToggle').addEventListener('click', function() {
                document.body.classList.toggle('bg-neutral');
                document.body.classList.toggle('text-white');
                
                const icon = this.querySelector('i');
                if (icon.classList.contains('fa-moon-o')) {
                    icon.classList.remove('fa-moon-o');
                    icon.classList.add('fa-sun-o');
                } else {
                    icon.classList.remove('fa-sun-o');
                    icon.classList.add('fa-moon-o');
                }
            });
            
            // 滚动时导航栏效果
            window.addEventListener('scroll', function() {
                const nav = document.getElementById('mainNav');
                if (window.scrollY > 10) {
                    nav.classList.add('shadow-lg');
                    nav.classList.add('bg-white/95');
                    nav.classList.add('backdrop-blur-sm');
                } else {
                    nav.classList.remove('shadow-lg');
                    nav.classList.remove('bg-white/95');
                    nav.classList.remove('backdrop-blur-sm');
                }
            });
        });

        // 生成二维码（使用qrcode-generator库）
        function generateQRCode() {
            const currentUrl = window.location.href;
            console.log('当前URL:', currentUrl);
            
            const qrContent = currentUrl + (currentUrl.includes('?') ? '&' : '?') + 'mobile=1';
            console.log('二维码内容:', qrContent);
            
            const qrcodeElement = document.getElementById('qrcode');
            
            // 清空容器并显示加载状态
            qrcodeElement.innerHTML = `
                <div class="text-center text-neutral/50">
                    <i class="fa fa-spinner fa-spin text-3xl mb-2"></i>
                    <p>生成中...</p>
                </div>
            `;
            
            try {
                // 使用qrcode-generator库
                const qr = qrcode(0, 'L'); // 0 = 最小尺寸, L = 低纠错级别
                qr.addData(qrContent);
                qr.make();
                
                // 生成SVG格式的二维码
                qrcodeElement.innerHTML = qr.createSvgTag({
                    cellColor: '#3B82F6', // 二维码颜色
                    margin: 4             // 边距
                });
                
                console.log('二维码生成成功');
            } catch (error) {
                console.error('生成二维码失败:', error);
                qrcodeElement.innerHTML = `
                    <div class="text-center text-red-500">
                        <i class="fa fa-exclamation-circle text-3xl mb-2"></i>
                        <p>生成失败: ${error.message}</p>
                        <button onclick="generateQRCode()" class="mt-2 px-4 py-1 bg-primary/10 text-primary rounded">
                            重试
                        </button>
                    </div>
                `;
            }
        }

        // 初始化图表
        let goalChart;
        function initChart() {
            const ctx = document.getElementById('goalChart').getContext('2d');
            
            // 配置图表样式
            goalChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: [],
                    datasets: [{
                        label: '目标金额 (万元)',
                        data: [],
                        backgroundColor: 'rgba(59, 130, 246, 0.7)',
                        borderColor: 'rgba(59, 130, 246, 1)',
                        borderWidth: 1,
                        borderRadius: 6,
                        barThickness: 30,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: {
                        duration: 2000,
                        easing: 'easeOutQuart'
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            },
                            ticks: {
                                precision: 0
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                            padding: 12,
                            cornerRadius: 8,
                            titleFont: {
                                size: 14,
                                weight: 'bold'
                            },
                            bodyFont: {
                                size: 13
                            },
                            callbacks: {
                                label: function(context) {
                                    return `目标金额: ${context.raw} 万元`;
                                }
                            }
                        }
                    },
                    interaction: {
                        mode: 'index',
                        intersect: false
                    },
                    plugins: {
                        title: {
                            display: false
                        }
                    }
                }
            });
        }

        // 更新图表数据
        function updateChart() {
            // 排序数据（默认按金额从高到低）
            sortData('high');
            
            // 准备图表数据
            const labels = goalData.map(item => item.name);
            const amounts = goalData.map(item => item.amount);
            
            // 更新图表
            goalChart.data.labels = labels;
            goalChart.data.datasets[0].data = amounts;
            goalChart.update();
        }

        // 更新表格数据
        function updateTableData() {
            const tableBody = document.getElementById('goalTableBody');
            
            // 清空表格
            tableBody.innerHTML = '';
            
            // 如果没有数据，显示空状态
            if (goalData.length === 0) {
                tableBody.innerHTML = `
                    <tr class="text-center">
                        <td colspan="5" class="px-6 py-12 text-neutral/50">
                            <i class="fa fa-inbox text-4xl mb-4"></i>
                            <p>暂无数据</p>
                        </td>
                    </tr>
                `;
                document.getElementById('displayCount').textContent = '0';
                return;
            }
            
            // 排序数据（默认按金额从高到低）
            sortData('high');
            
            // 填充表格
            goalData.forEach((item, index) => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-neutral-light/50 transition-colors';
                
                // 状态样式
                let statusClass = '';
                let statusText = '';
                
                if (item.status === 'active') {
                    statusClass = 'bg-green-100 text-green-800';
                    statusText = '进行中';
                } else if (item.status === 'completed') {
                    statusClass = 'bg-blue-100 text-blue-800';
                    statusText = '已完成';
                } else {
                    statusClass = 'bg-gray-100 text-gray-800';
                    statusText = '已逾期';
                }
                
                // 设置行内容
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-neutral">${index + 1}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10 bg-primary/10 rounded-full flex items-center justify-center">
                                <span class="text-primary font-medium">${item.name.charAt(0)}</span>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-neutral">${item.name}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-neutral">${item.amount}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral/60">
                        ${item.time}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
                            ${statusText}
                        </span>
                    </td>
                `;
                
                tableBody.appendChild(row);
            });
            
            // 更新显示计数
            document.getElementById('displayCount').textContent = goalData.length;
        }

        // 更新统计信息
        function updateStats() {
            if (goalData.length === 0) {
                document.getElementById('totalParticipants').textContent = '0';
                document.getElementById('averageGoal').textContent = '0 万元';
                document.getElementById('maxGoal').textContent = '0 万元';
                document.getElementById('minGoal').textContent = '0 万元';
                document.getElementById('progressBar').style.width = '0%';
                document.getElementById('progressText').textContent = '0%';
                return;
            }
            
            // 计算统计数据
            const amounts = goalData.map(item => item.amount);
            const total = amounts.reduce((sum, amount) => sum + amount, 0);
            const average = total / amounts.length;
            const max = Math.max(...amounts);
            const min = Math.min(...amounts);
            
            // 更新DOM
            document.getElementById('totalParticipants').textContent = goalData.length;
            document.getElementById('averageGoal').textContent = average.toFixed(2) + ' 万元';
            document.getElementById('maxGoal').textContent = max.toFixed(2) + ' 万元';
            document.getElementById('minGoal').textContent = min.toFixed(2) + ' 万元';
            
            // 计算并更新进度条 (模拟进度)
            const progress = (total / (max * goalData.length)) * 100;
            document.getElementById('progressBar').style.width = progress + '%';
            document.getElementById('progressText').textContent = progress.toFixed(1) + '%';
        }

        // 排序数据
        function sortData(direction) {
            if (direction === 'high') {
                goalData.sort((a, b) => b.amount - a.amount);
            } else {
                goalData.sort((a, b) => a.amount - b.amount);
            }
        }

        // 提交目标
        function submitGoal() {
            const amountInput = document.getElementById('goalAmount');
            const nameInput = document.getElementById('participantName');
            
            const amount = parseFloat(amountInput.value);
            const name = nameInput.value.trim();
            
            if (isNaN(amount) || amount <= 0) {
                alert('请输入有效的目标金额！');
                return;
            }
            
            if (name === '') {
                alert('请输入您的姓名！');
                return;
            }
            
            // 创建新的目标对象
            const newGoal = {
                id: Date.now(), // 使用时间戳作为唯一ID
                name: name,
                amount: amount,
                time: new Date().toLocaleString(),
                status: 'active'
            };
            
            // 将新目标添加到数据中
            goalData.push(newGoal);
            
            // 保存到本地存储 (模拟服务器存储)
            localStorage.setItem('goalData', JSON.stringify(goalData));
            
            // 显示成功提示
            const successToast = document.getElementById('successToast');
            successToast.classList.remove('translate-y-20', 'opacity-0');
            
            // 关闭表单
            document.getElementById('mobileForm').classList.add('hidden');
            
            // 刷新数据
            setTimeout(() => {
                refreshData();
                successToast.classList.add('translate-y-20', 'opacity-0');
            }, 2000);
            
            // 重置表单
            amountInput.value = '';
            nameInput.value = '';
        }

        // 刷新数据
        function refreshData() {
            // 从本地存储获取数据 (模拟从服务器获取)
            const storedData = localStorage.getItem('goalData');
            if (storedData) {
                goalData = JSON.parse(storedData);
            }
            
            // 更新图表
            updateChart();
            
            // 更新表格
            updateTableData();
            
            // 更新统计信息
            updateStats();
            
            // 添加刷新动画效果
            const refreshBtn = document.getElementById('refreshBtn');
            refreshBtn.querySelector('i').classList.add('fa-spin');
            
            setTimeout(() => {
                refreshBtn.querySelector('i').classList.remove('fa-spin');
            }, 1000);
        }

        // 检查URL参数，确定是否显示移动端表单
        function checkUrlParams() {
            const params = new URLSearchParams(window.location.search);
            if (params.get('mobile') === '1' && isMobileWeChat()) {
                document.getElementById('mobileForm').classList.remove('hidden');
            }
        }
        
        // 检查本地存储中的数据
        function checkLocalStorage() {
            const storedData = localStorage.getItem('goalData');
            if (storedData) {
                goalData = JSON.parse(storedData);
            }
        }
        
        // 页面加载时执行初始化
        checkUrlParams();
        checkLocalStorage();
    </script>
</body>
</html>    